<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .layui-table-cell{
            height:auto;
            max-width: 100%;
            overflow: visible;
            text-align: center;
            white-space: normal;
        }
        input{
            width: 300px;
            height: 40px;
        }
    </style>
</head>
<body>
<body>

<input type="search" placeholder="输入删除图书的id" id="id">
<button type="button" class="btn" style="height: 40px;width: 40px;"><img src="picture/删除.png" alt="" width="30px"></button>
<table class="layui-hide" id="test"></table>
<div id="test1"></div>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use(['laypage','table'], function () {
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: 50 //数据总数，从服务端得到
            , limit: 5
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数
                var table = layui.table;
                table.render({
                    elem: '#test'
                    , limit: 5
                    ,url: 'http://8.130.14.155:8080/user/student/array/'+obj.curr +'/'+'3'
                    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    ,cols: [[
                        {field:'id', width:80, title: 'ID', sort: true}
                        ,{field:'title', width:120, title: '书名'}
                        ,{field:'cover', width:120, title: '图片',templet:'<div><img src="{{d.cover}}" alt=""></div>'}
                        ,{field:'author', width:120, title: '作者名'}
                        ,{field:'date', width:120, title: '出版日期'}
                        ,{field:'press', title: '出版社', width: 120, minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                        ,{field:'abs', title: '简介'}
                    ]]
                    ,parseData: function(res){ //res 即为原始返回的数据
                        return {
                            "code": 0, //解析接口状态
                            "msg": "", //解析提示文本
                            "count": 100, //解析数据长度
                            "data":res//解析数据列表
                        };

                    }
                })
            }
        });
    });
</script>
<script>
var btn=document.querySelector('.btn')
var input=document.querySelector('input')
btn.onclick=function () {
    const xhr = new XMLHttpRequest()
    xhr.open('POST','http://8.130.14.155:8080/user/delet/'+input.value)
    xhr.send()
    location.href='book.html'
}


</script>
</body>
</body>
</html>